<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <link rel="stylesheet" type="text/css" href="./css/yzl.css">

    <style>
        .header {
            display: none;
        }

        .active {
            display: block;
            border: none;
        }
    </style>

</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" v-cloak>
    <div id="headers">
        <!--首页-->
        <div class="header">
          <span class="title" style="color:black" v-show="!usersearch">活动</span>
          <img style="position: absolute;left:11px;top:26px;width:24px;height:24px;"
               v-src="'image/home_icon_scanner.png'" tapmode v-myclick="scanner" v-show="usersearch">
            <div class="shopsearch" onclick="openSearch()" v-show="usersearch">
                <img class="icon-search" src="image/search.png">
                <input placeholder="您想找什么" tapmode disabled>
            </div>
            <!-- <span class="title" style="color:black">集脉鑫城</span> -->
            <img onclick="openMall()" class="home-button-qrcode"
                 v-src="'image/home_icon_category.png'" tapmode v-show="usersearch">
        </div>
        <div class="header">
            <span class="title" style="color:black">限时抢购</span>
        </div>
        <div  class="header active" :class="{'shopheader':!isshopinfo}">
            <div class="preview"  style="position:absolute;left:10px;font-size:14px;" v-myclick="[1,preview]" v-show="!isshopinfo">预览</div>
            <span class="title" v-show="isshopinfo">店铺</span>
            <span class="title" id="shopname" v-show="!isshopinfo">{{shopinfo.shopname}}</span>
            <span   style="position:absolute;right:10px;font-size:14px;"  v-show="!isshopinfo" v-myclick="[shopinfo.share, share]">推广</span>
            <!-- <span   style="position:absolute;right:10px;font-size:12px;"  v-myclick="[2,preview]" v-show="isshopinfo&&ismanager">管理店铺</span> -->
        </div>
        <!--商城-->
        <div class="header">
            <span class="title" style="color:black">友人精选</span>
        </div>
        <!--我的-->
        <div class="header" style="background:linear-gradient(to right, #8DCDEF,#259CF8)">
          <img tapmode onclick="openChangeMember()" class="user-header-icon" style="float:left"
               v-src="'image/user_icon_changeuser.png'">
            <span class="title" style="color: white;padding-left:46px;">我的</span>
            <img onclick="openMessage()" class="user-header-icon" style="float:right"
                 v-src="'image/user_icon_msg.png'" tapmode>
            <img onclick="openSetting()" class="user-header-icon" style="float:right"
                v-src="'image/user_icon_setting.png'" tapmode>
            <span style="position:absolute;font-size:12px;right:25px;top:20px;color:white;background:red;line-height:normal;padding:0 5px;border-radius:7px;z-index: 10"
              v-if="unReadMsgCount>0">{{unReadMsgCount}}
        </div>
    </div>

    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="footer border-t">
        <ul class="flex-wrap">
            <li tapmode="hover" onclick="randomSwitchBtn( 0 );" class="flex-con" :class="BSImg">活动</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 1 );" class="flex-con" :class="BSImg">限时抢购</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 2 );" class="flex-con active" :class="BSImg">店铺</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 3 );" class="flex-con" :class="BSImg">精选</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 4 );" class="flex-con" :class="BSImg">我的</li>
        </ul>
    </div>
</div>
</body>
</html>
<script src="script/api.js"></script>
<script src="script/vue.js"></script>
<script src="script/app.js"></script>
<script src="script/common.js"></script>
<script src="script/url.js"></script>
<script>
    var vm;
    var isOpen = true;
    var analyzeIndex;
    var pageName;
    var ismanager = false;
    var isshopinfo = true;
    var usersearch = false;
    shopinfo = '';

    openurl = './html/shop/shopinfo.html';

    var frameNames = ['活动', '限时抢购', '店铺', '精选', '我的'];
    apiready = function () {
        setBSImg();
        MNActionButton = api.require('PIActionButton');
        FNScanner  = api.require('FNScanner');
        wx = api.require('wx');
        qq = api.require('QQPlus');
        if (getPrefs('token')) {
          user = JSON.parse(getPrefs('user'));
          if(user.member_type=='6'){
            openurl = './html/shop/myshop.html';
            var data = {
                member_id: getPrefs('member_id')
            };
            var callback = function (ret) {
                shopinfo = ret.content;
                vm.shopinfo = shopinfo;
                api.parseTapmode();
            };
            pinet.post(URL.getShopInfo, data, callback);
            isshopinfo = false;
            ismanager = true;
          }
          if(user.member_type==5){
            usersearch = true;
          }
        }
        initApp();
        if (api.pageParam && api.pageParam.to) {
            funIniGroup(api.pageParam.to);
        } else {
            funIniGroup(2);
        }
        $api.fixTabBar($api.byId('footer'));
        addListeners();
        doubleBack();
        api.parseTapmode();
    };

    function initApp() {
        vm = new Vue({
            el: '#wrap',
            data: {
                BSImg: Vue.BSImg,
                isshopinfo:isshopinfo,
                ismanager:ismanager,
                shopinfo:shopinfo,
                usersearch:usersearch,
                unReadMsgCount: 0,
            },
            methods: {
              preview:function(pindex){
                api.closeFrameGroup({
                    name: 'group'
                });
                if(pindex==1){
                  openurl = './html/shop/shopinfo.html';
                  vm.isshopinfo = true;
                }else{
                  openurl = './html/shop/myshop.html';
                  vm.isshopinfo = false;
                }
                funIniGroup(2);
              },
              share: function (share) {
                  if(!getPrefs('token')){
                      reLogin();
                  }else{
                    onEvent('t005_c007','我的-邀请','');
                    attributes={};
                    var sharesuffix = {
                      eventId:'t005_c007_a001',
                      eventLable:'我的-邀请-分享',
                      attributes:attributes
                    }
                    openMNActionInviteButton(share,sharesuffix);
                  }
                  },
                  scanner:function(){
                    FNScanner.open({
                        autorotation: true,
                        content: '请扫描推荐人的二维码'
                    }, function(ret, err) {
                        if (ret) {
                          url = ret.content;
                          if(url){
                            var domain = getPrefs("wap_url");
                            if(url.indexOf(domain) < 0 ){
                             pinet.alert('请扫描正确的推荐人二维码');
                             return;
                            }
                            var url = url.split("invite_code=");
                            invite_code = url[url.length-1];
                            if(url.length<2){
                              pinet.alert('请扫描正确的推荐人二维码');
                              return;
                            }
                            var params = {
                              invite_code:invite_code
                            }
                            if(!getPrefs('token')){
                                openWin("html/login/coderegister",params);
                            }else{
                              openWin("html/user/makeprofit",params);
                            }
                          }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
}
            }
        });
    }

    function openMessage() {
        if(!getPrefs('token')){
            reLogin();
        }
        openWin('html/user/message');
    }

    function openSearch() {
        openWin('html/mall/search');
    }

    function openSetting() {
        if(!getPrefs('token')){
            reLogin();
            return;
        }
        openWin('html/user/settings');
    }

    function checkshop() {
        openWin('html/shop/myshop');
    }

    function openChangeMember() {
        if (!getPrefs('token')) {
            reLogin();
            return;
        }
        api.sendEvent({
            name: 'changeMember',
            extra: {}
        });
        openWin('html/user/changeMember');
    }

    function funIniGroup(index) {
        var frames = [];
        frames.push({
            name: 'home',
            url: './html/shop/shopactivity.html',
            bgColor: '#f7f7f7',
            bounces: true
        }, {
            name: 'seckill',
            url: './html/seckill/seckill.html',
            bgColor: '#f7f7f7',
            bounces: true
        }, {
            name: 'shopinfo',
            url: openurl,
            bgColor: '#f7f7f7',
            bounces: false
        }, {
            name: 'share',
            url: './html/share/share.html',
            bgColor: '#f7f7f7',
            bounces: false
        }, {
            name: 'user',
            url: './html/user/user.html',
            bgColor: '#f7f7f7',
            bounces: true
        });
        switchActiveCls(index);
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            preload:1,
            rect: {
                x: 0,
                y: 60,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight-60
            },
            index: index,
            frames: frames
        }, function (ret) {
            indexOnPageStart();
            // if (ret.index == 2) {
            //     showMall();
            // } else {
            //     hideMall();
            // }
        });
    }

    function updMyFavors() {
        var jsfun = "setValue();";
        api.execScript({
            frameName: 'collection',
            script: jsfun
        });
    }

    function openMall() {
      // showMall();
      openWin('./html/mall/mall',{unReadMsgCount:vm.unReadMsgCount});
    }

    // 随意切换按钮
    function randomSwitchBtn(index) {
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#headers .header'),
            tag = eFootLis[index];
        if (tag == $api.dom('#footer li.active'))return;
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if (i == index) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }

        }
        api.setFrameGroupIndex({
            name: 'group',
            index: index,
        });
    }

    function switchActiveCls(index) {
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#headers .header'),
            tag = eFootLis[index];
        if (tag == $api.dom('#footer li.active'))return;
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if (i == index) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
    }

    function isWhichFrame() {
        var eFootLis = $api.domAll('#footer li');
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if ($api.hasCls(eFootLis[i], 'active')) {
                return i;
            }
        }
    }

    function indexOnPageStart() {
        var frameIndex = isWhichFrame();
        if (analyzeIndex >= 0) {
            if (analyzeIndex == frameIndex) {
                return;
            } else {
                indexOnPageEnd();
            }
        }
        analyzeIndex = frameIndex;
        pageName = frameNames[frameIndex];
        onPageStart(pageName);
    }

    function indexOnPageEnd() {
        if (analyzeIndex >= 0) {
            onPageEnd(pageName);
            analyzeIndex = -1;
        }
    }

    function addListeners() {
        api.addEventListener({
            name: 'getUnReadMsgCount'
        }, function (ret) {
            vm.unReadMsgCount = ret.value.count;
            api.setAppIconBadge({
                badge: ret.value.count
            });
        });

        api.addEventListener({
            name: 'setshop'
        }, function (ret) {
          api.closeFrameGroup({
              name: 'group'
          });
          openurl = './html/shop/myshop.html';
          vm.isshopinfo = false;
          funIniGroup(2);
        });

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            indexOnPageStart();
            if (isOpen) {
                isOpen = false;
                var params = api.pageParam;
                if (params) {
                    if (params.startImg) {
                        openWin('html/home/browser', {url: params.startImg.url});
                    } else if (params.goods_id) {
                        openWin('html/home/browser', {goods_id: params.goods_id});
                    }
                }
            }
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            indexOnPageEnd();
        });
    }



</script>
